<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>直播管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增直播</el-breadcrumb-item>
      </el-breadcrumb>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">新增直播</h3>
    </el-card>

    <el-card style="margin-top: 20px">
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">基础信息</h3>
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addLiveFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="直播名称" prop="livename" placeholder="请输入直播名称">
          <el-input v-model="addForm.livename"></el-input>
        </el-form-item>

        <el-form-item label="直播封面" :label-width="formLabelWidth" prop="coursecover">
          <el-input type="hidden" v-model="addForm.livecover" autocomplete="off"></el-input>
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :headers="headerToken"
              name="livecover"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="直播描述" prop="livedescribe" placeholder="请输入直播描述">
          <el-input v-model="addForm.livedescribe"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" placeholder="请选择开始时间" >
          <div class="block">
            <el-date-picker
                v-model="addForm.livestarttime"
                type="date"
                placeholder="选择日期"
                aria-readonly="true"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="预计直播时长" prop="liveduration" placeholder="请输入">
          <el-input v-model="addForm.liveduration"></el-input>
        </el-form-item>

        <el-form-item label="预约人数" prop="liveSubscribeCounts">
          <el-input v-model="addForm.liveSubscribeCounts"></el-input>
        </el-form-item>

        <el-form-item label="直播回放" prop="playBack">
          <el-radio v-model="addForm.playBack" label="1">可以回放</el-radio>
          <el-radio v-model="addForm.playBack" label="0">不可以回放</el-radio>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px">
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播设置</h3>
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addLiveFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
<!--        <el-form-item label="直播商品" prop="" placeholder="请输入直播名称">-->
<!--          <el-input v-model="addForm.livename"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="优惠卷" prop="" placeholder="请输入直播名称">-->
<!--          <el-input v-model=""></el-input>-->
<!--        </el-form-item>-->

        <el-form-item label="签到" prop="signIn">
          <el-radio v-model="addForm.signIn" label="1">可以签到</el-radio>
          <el-radio v-model="addForm.signIn" label="0">不可以签到</el-radio>
        </el-form-item>
        <el-form-item label="直播打赏" prop="liveTip">
          <el-radio v-model="addForm.liveTip" label="1">可以打赏</el-radio>
          <el-radio v-model="addForm.liveTip" label="0">不可以打赏</el-radio>
        </el-form-item>
        <el-form-item label="分享" prop="liveShare">
          <el-radio v-model="addForm.liveShare" label="1">可以分享</el-radio>
          <el-radio v-model="addForm.liveShare" label="0">不可以分享</el-radio>
        </el-form-item>
        <el-form-item label="点赞" prop="liveLike">
          <el-radio v-model="addForm.liveLike" label="1">可以点赞</el-radio>
          <el-radio v-model="addForm.liveLike" label="0">不可以点赞</el-radio>
        </el-form-item>
        <el-form-item label="评论" prop="liveComment">
          <el-radio v-model="addForm.liveComment" label="1">可以评论</el-radio>
          <el-radio v-model="addForm.liveComment" label="0">不可以评论</el-radio>
        </el-form-item>
      </el-form>

    </el-card>
    <el-card style="margin-top: 20px">
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">售卖信息</h3>
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addLiveFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="商品上架时间" prop="launchTime">
          <el-radio v-model="addForm.launchTime" label="1">立刻上架</el-radio>
          <el-radio v-model="addForm.launchTime" label="0">暂不上架</el-radio>
        </el-form-item>
        <el-form-item label="直播状态" prop="liveStatus">
          <el-radio v-model="addForm.livestatus" label="1">已开始</el-radio>
          <el-radio v-model="addForm.livestatus" label="2">未开始</el-radio>
          <el-radio v-model="addForm.livestatus" label="3">已结束</el-radio>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        直播商品列表
        <el-button type="primary" style="float: right" size="mini" @click="showAdd2">新增商品</el-button>
      </h3>

      <!--            新增过来的表格-->
      <el-table :data="addList2"  border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="commoditycover"
            label="商品封面"
            width="180">
          <template slot-scope="scope">
            <img :src="commodityUrl+scope.row.commoditycover" style="width: 50px;height: 50px;border-radius: 50%" />
          </template>
        </el-table-column>
        <el-table-column
            prop="commodityname"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="stockcountnum"
            label="库存"
            width="180">
        </el-table-column>
        <el-table-column
            prop="salecounts"
            label="销量"
            width="180">
        </el-table-column>
      </el-table>

      <!-- 隐藏的模态框   -->
      <el-dialog title="选择商品" :visible.sync="addDialogVisible2" width="70%" >
        <el-card style="margin-top: 20px">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="商品名称：">
              <el-input v-model="commodityName" placeholder="请输入搜素商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="searchCommodity">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="resetBox2">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="commodityList" @selection-change="idChance2"  border stripe ref="multipleTable">

            <el-table-column type="selection" width="60" >

            </el-table-column>
            <el-table-column
                prop="commoditycover"
                label="商品封面"
                width="180">
              <template slot-scope="scope">
                <img :src="commodityUrl+scope.row.commoditycover" style="width: 50px;height: 50px;border-radius: 50%" />
              </template>
            </el-table-column>
            <el-table-column
                prop="commodityname"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="stockcountnum"
                label="库存"
                width="180">
            </el-table-column>
            <el-table-column
                prop="salecounts"
                label="销量"
                width="180">
            </el-table-column>

          </el-table>

          <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="pageNum"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doAdd02">确 定</el-button>
        <el-button @click="cancelAdd2">取 消</el-button>


      </el-dialog>


    </el-card>
<!--    优惠卷模块-->
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        直播优惠卷列表
        <el-button type="primary" style="float: right" size="mini" @click="showAdd3">新增优惠卷</el-button>
      </h3>

      <!--            新增过来的表格-->
      <el-table :data="addList3"  border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="couponname"
            label="优惠卷名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="coupontypeid"
            label="优惠卷类型"
            width="180">
          <template slot-scope="scope">
            <span v-text="scope.row.coupontypeid ==1 ?'优惠卷':'折扣卷'"></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="lang"
            label="使用范围"
            width="180">
        </el-table-column>
        <el-table-column
            prop="status"
            label="优惠卷状态"
            width="180">
          <template slot-scope="scope">
            <span v-text="scope.row.coupontypeid ==1 ?'正在进行':'已过期'"></span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 隐藏的模态框   -->
      <el-dialog title="选择优惠卷" :visible.sync="addDialogVisible3" width="70%" >
        <el-card style="margin-top: 20px">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="商品名称：">
              <el-input v-model="couponName" placeholder="请输入搜素商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="searchCoupon">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="resetBox3">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="couponList" @selection-change="idChance3"  border stripe ref="multipleTable">

            <el-table-column type="selection" width="60" >

            </el-table-column>
            <el-table-column
                prop="couponname"
                label="优惠卷名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="coupontypeid"
                label="优惠卷类型"
                width="180">
              <template slot-scope="scope">
                <span v-text="scope.row.coupontypeid ==1 ?'优惠卷':'折扣卷'"></span>
              </template>
            </el-table-column>
            <el-table-column
                prop="lang"
                label="使用范围"
                width="180">
            </el-table-column>
            <el-table-column
                prop="status"
                label="优惠卷状态"
                width="180">
              <template slot-scope="scope">
                <span v-text="scope.row.coupontypeid ==1 ?'正在进行':'已过期'"></span>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
              :current-page="pageNum"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doAdd03">确 定</el-button>
        <el-button @click="cancelAdd3">取 消</el-button>


      </el-dialog>


    </el-card>



<!--    老师模块-->
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        直播教师列表
        <el-button type="primary" style="float: right" size="mini" @click="showAdd">新增老师</el-button>
      </h3>

      <!--            新增过来的表格-->
      <el-table :data="addList"  border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="empname"
            label="员工列表"
            width="180">
        </el-table-column>
        <el-table-column
            prop="rolename"
            label="角色"
            width="180">
        </el-table-column>
        <el-table-column
            prop="empaccount"
            label="手机号码"
            width="180">
        </el-table-column>
        <el-table-column
            prop="status"
            label="员工状态"
            width="180">
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="doAdd">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-card>
    <!-- 隐藏的模态框   -->
    <el-dialog title="选择教师" :visible.sync="addDialogVisible" width="70%" >
      <el-card style="margin-top: 20px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="老师名称：">
            <el-input v-model="techerName" placeholder="请输入搜素老师名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="searchTeacher">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="resetBox">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 30px">

        <el-table :data="teacherList" @selection-change="idChance"  border stripe ref="multipleTable">

          <el-table-column type="selection" width="60" >

          </el-table-column>
          <el-table-column
              prop="empname"
              label="员工列表"
              width="180">
          </el-table-column>
          <el-table-column
              prop="rolename"
              label="角色"
              width="180">
          </el-table-column>
          <el-table-column
              prop="empaccount"
              label="手机号码"
              width="180">
          </el-table-column>
          <el-table-column
              prop="status"
              label="员工状态"
              width="180">
          </el-table-column>

        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

      </el-card>
      <el-button type="primary" @click="doAdd0">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>


    </el-dialog>



  </div>

</template>

<script>
export default {
  name: "LiveAdd",
  data(){
    return{
      nginxUrl:this.$MyUrl.imgUrl+"course/",
      headerToken: {
        token:window.sessionStorage.getItem("token")
      },
      commodityUrl:this.$MyUrl.imgUrl+"commodity/",
      couponUrl:this.$MyUrl.imgUrl+"coupon/",
      imageUrl:'',
      uploadUrl:this.$MyUrl.serverUrl + "live/upload",
      formLabelWidth:'120px',
      pageNum: 1,
      pageSize: 5,
      total: 0,
      addDialogVisible:false,
      addDialogVisible2:false,
      addDialogVisible3:false,
      techerName:null,
      commodityName:null,
      couponName:null,
      teacherList:[],
      commodityList:[],
      couponList:[],
      readyList:[],
      readyList2:[],
      readyList3:[],
      addList:[],
      addList2:[],
      addList3:[],
      addForm:{
        id:'',
        livename:'',
        livecover:'',
        livedescribe:'',
        livestarttime:'',
        liveduration:'',
        livestatus:'',
        playBack:'',
        signIn:'',
        liveTip:'',
        liveShare:'',
        liveLike:'',
        liveComment:'',
        launchTime:'',
        liveSubscribeCounts:null,
        teacherList:[],
        commodityList:[],
        couponList:[],

      },
      addFormRules: {

      },
    }
  },
  methods:{
    handleAvatarSuccess(res, file) {
      if (res.code==200){
        this.addForm.livecover=res.data;
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 新增商品模态框中 取消新增商品
    cancelAdd3(){
      this.addDialogVisible3 = false;
    },
    // 新增优惠卷模态框中 确定新增优惠卷
    doAdd03(){
      this.addList3 = this.readyList3;
      // alert(this.addList)
      this.addDialogVisible3 = false;
    },
    // 保存 被选中的优惠卷反显到新增直播页面中
    idChance3(selection){
      this.readyList3 =[];
      for(let o of selection){
        this.readyList3.push(o);
      }
    },
    //重置查询
    resetBox3(){
      this.couponName="";
      this.getCouponList();
    },
    // 商品模态框中的查询
    searchCoupon(){
      this.pageNum = 1;
      this.getCouponList();
    },
    //打开 新增商品 模态框
    showAdd3(){
      this.addDialogVisible3 = true;
      // this.getTeacherList();
      // this.$nextTick(() => {
      //   for (let com of this.addList) {
      //     this.teacherList.forEach((item, index) => {
      //       if (com.id === item.id) {
      //         this.$refs.multipleTable.toggleRowSelection(this.teacherList[index], true);
      //       }
      //     })
      //   }
      // })
    },
    //获取 新增直播 添加优惠卷信息
    getCouponList(){
      let url = "coupon/showCoupon";
      this.$axios.get(url, {
        params: {
          name:this.couponName,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.couponList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },


    // 新增商品模态框中 取消新增商品
    cancelAdd2(){
      this.addDialogVisible2 = false;
    },
    // 新增商品模态框中 确定新增商品
    doAdd02(){
      this.addList2 = this.readyList2;
      // alert(this.addList)
      this.addDialogVisible2 = false;
    },
    // 保存 被选中的商品反显到新增直播页面中
    idChance2(selection){
      this.readyList2 =[];
      for(let o of selection){
        this.readyList2.push(o);
      }
    },
    //重置查询
    resetBox2(){
      this.techerName="";
      this.getCommodityList();
    },
    // 商品模态框中的查询
    searchCommodity(){
      this.pageNum = 1;
      this.getCommodityList();
    },
    //打开 新增商品 模态框
    showAdd2(){
      this.addDialogVisible2 = true;
      // this.getTeacherList();
      // this.$nextTick(() => {
      //   for (let com of this.addList) {
      //     this.teacherList.forEach((item, index) => {
      //       if (com.id === item.id) {
      //         this.$refs.multipleTable.toggleRowSelection(this.teacherList[index], true);
      //       }
      //     })
      //   }
      // })
    },
    //获取 新增直播 添加商品信息
    getCommodityList(){
      let url = "commodity/clist";
      this.$axios.get(url, {
        params: {
          name:this.commodityName,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.commodityList = res.data.data.list;
          console.log(this.commodityList)
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    // 保存 被选中的老师反显到新增直播页面中
    idChance(selection){
      this.readyList =[];
      for(let o of selection){
        this.readyList.push(o);
      }
    },
    // 新增模态框中 确定新增老师
    doAdd0(){
      this.addList = this.readyList;
      // alert(this.addList)
      this.addDialogVisible = false;
    },
    // 老师模态框中的查询
    searchTeacher(){
      this.pageNum = 1;
      this.getTeacherList();
    },
    //重置查询
    resetBox(){
      this.techerName="";
      this.getTeacherList();
    },
    // 教师模态框的取消
    cancelAdd(){
      this.addDialogVisible = false;
    },
    //打开 新增老师 模态框
    showAdd(){
      this.addDialogVisible = true;
      // this.getTeacherList();
      // this.$nextTick(() => {
      //   for (let com of this.addList) {
      //     this.teacherList.forEach((item, index) => {
      //       if (com.id === item.id) {
      //         this.$refs.multipleTable.toggleRowSelection(this.teacherList[index], true);
      //       }
      //     })
      //   }
      // })
    },
    //获取 新增直播 添加老师模态框中的角色为老师的员工数据
    getTeacherList(){
      let url = "emp/eRolelist";
      this.$axios.get(url, {
        params: {
          name:this.techerName,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.teacherList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },

    // 新增直播 最终的确定
    doAdd(){
      this.addForm.teacherList = this.addList;
      this.addForm.commodityList = this.addList2;
      this.addForm.couponList = this.addList3;
      // console.log(this.addList);
      // console.log(this.addForm);
      let url = "live/add";
      this.$axios.post(url,this.addForm).then(res=>{
        if (res.data.code == 200) {
          //增加成功 置空
          this.addForm = {};
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.$router.push("/Live");
        }else{
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },
    //更改每页多少条数据
    handleSizeChange2(newSize) {
      this.pageSize = newSize;
      this.getCommodityList();
    },
    //换页
    handleCurrentChange2(newPage) {
      this.pageNum = newPage;
      this.getCommodityList();
    },
    //更改每页多少条数据
    handleSizeChange3(newSize) {
      this.pageSize = newSize;
      this.getCouponList();
    },
    //换页
    handleCurrentChange3(newPage) {
      this.pageNum = newPage;
      this.getCouponList();
    },
    //更改每页多少条数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getTeacherList();
    },
    //换页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getTeacherList();
    },

  },
  created() {
    this.getTeacherList();
    this.getCommodityList();
    this.getCouponList();
  }
}
</script>

<style scoped>

</style>